<!--
 * @Author: liu
 * @Date: 2024-01-18 22:32:59
 * @LastEditors: liu
 * @LastEditTime: 2024-07-10 01:37:13
 * @FilePath: \yyx_admin\src\views\courses\CourseContent.vue
 * @Description: 
 * 天道酬勤
-->
<template>
  <el-card>
    <el-page-header @back="$router.go(-1)" style="margin-bottom: 20px">
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 mr-3"> 课程安排 </span>
          <span
            class="text-large font-600 mr-6"
            style="font-weight: 600; margin-left: 15px"
            >{{ courseInfo.title }}</span
          >
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button
            color="#5a98de"
            icon="Plus"
            type="primary"
            class="ml-2"
            @click="chapterDlg.showAndInit(courseInfo)"
            >添加章节</el-button
          >
        </div>
      </template>
    </el-page-header>
    <!-- <span
      class="text-large font-600 mr-3"
      style="
        font-weight: 600;
        margin-left: 20px;
        margin-bottom: 20px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
      >{{ courseInfo.title }}</span
    > -->
    <el-tree
      :data="courseCAL"
      :props="defaultProps"
      :indent="0"
      class="tree-chapter"
      default-expand-all="true"
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span v-if="node.level === 1">
            <!-- <el-text class="mx-1" type="primary" >Primary</el-text> -->
            <a
              @click.stop="lessonDlg.showAndInit(node, data, courseInfo)"
              style="color: #409eff"
              >添加课时</a
            >
            <a
              @click.stop="chapterDlg.showAndInit(courseInfo, data.id)"
              style="color: #e6a23c"
            >
              编辑</a
            >

            <a
              v-if="data.status === 0"
              @click.stop="ChapterStatusDlg.showAndInit(data)"
              style="color: #d4d7de"
            >
              隐藏</a
            >
            <a
              v-if="data.status === 1"
              @click.stop="ChapterStatusDlg.showAndInit(data)"
              style="color: #409eff"
            >
              待更新
            </a>
            <a
              v-if="data.status === 2"
              @click.stop="ChapterStatusDlg.showAndInit(data)"
              style="color: #67c23a"
            >
              已发布</a
            >
            <a
              style="margin-left: 8px; color: #f56c6c"
              @click="delChapter(node, data)"
              >删除
            </a>
          </span>
          <span v-else-if="node.level === 2" style="">
            <a
              v-if="data.vodStatus === 3"
              @click="uploadVideoImgDlg.showAndInit(node, data)"
              style="color: #67c23a"
              >视频已传</a
            >
            <a
              v-if="data.vodStatus === 0"
              @click="uploadVideoImgDlg.showAndInit(node, data)"
              style="color: #409eff"
              >上传视频</a
            >
            <a
              @click.stop="lessonDlg.showAndInit(node, data, courseInfo)"
              style="color: #e6a23c"
            >
              编辑</a
            >
            <a
              v-if="data.status === 0"
              @click.stop="lessonStatusDlg.showAndInit(data)"
              style="color: #d4d7de"
            >
              隐藏</a
            >
            <a
              v-if="data.status === 1"
              @click.stop="lessonStatusDlg.showAndInit(data)"
              style="color: #606266"
            >
              未发布</a
            >
            <a
              v-if="data.status === 2"
              @click.stop="lessonStatusDlg.showAndInit(data)"
              style="color: #67c23a"
            >
              已发布</a
            >
            <a
              style="margin-left: 8px; color: #f56c6c"
              @click.stop="delLesson(data)"
              >删除</a
            >
          </span>
        </span>
      </template>
    </el-tree>
    <ChapterDialogCreateOrEdit ref="chapterDlg" @chapter-refresh="loadData()" />
    <LessonDlgCreateOrEdit ref="lessonDlg" @lesson-change="loadData()" />
    <ChapterStatusChange ref="ChapterStatusDlg" @statusChange="loadData()" />
    <UploadVideoImgDialog ref="uploadVideoImgDlg" @vodChange="loadData()" />
    <LessonStatusChange ref="lessonStatusDlg" @lessonStatus="loadData()" />
    <LessonDelDlg ref="lessonDelDlg" @lessonDel="loadData()" />
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, markRaw } from 'vue'
import {
  getCourseInfoById,
  getChAndLeByCourseId,
  deleteLesson
} from '@/api/course/index'
//导入章节对话框
import ChapterDialogCreateOrEdit from './components/ChapterDialogCreateOrEdit.vue'
//导入课时对话框
import LessonDlgCreateOrEdit from './components/LessonDlgCreateOrEdit.vue'
//导入章节状态更改对话框
import ChapterStatusChange from './components/ChapterStatusChange.vue'
//导入上传视频对话框
import UploadVideoImgDialog from './components/UploadVideoImgDialog.vue'
//导入课时状态对话框
import LessonStatusChange from './components/LessonStatusChange.vue'
//导入课时删除对话框
import LessonDelDlg from './components/LessonDelDlg.vue'
//导入element相关组件
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'

//导入组件公共实例
//import type { ComponentPublicInstance } from 'vue'
// interface Tree {
//   label: string
//   children?: []
// }

//章节对话框的引用
const chapterDlg = ref()
//课时对话框的引用
const lessonDlg = ref()
//课程发布对话框的引用
const ChapterStatusDlg = ref()
//课时状态对话框的引用
const lessonStatusDlg = ref()
//视频上传对话框的引用
const uploadVideoImgDlg = ref()
//课时删除的引用
const lessonDelDlg = ref()

//const lessonDlg = ref<ComponentPublicInstance | null>(null)

const defaultProps = {
  children: 'lessInfo',
  label: (data: any) => data.chapterName || data.lessonName
}

//课程基本信息
let courseInfo = reactive({
  id: 0,
  title: '',
  lesson_num: 0
})

//课程章节课时信息
let courseCAL = ref<any>([])

const props = defineProps({
  courseId: {
    type: Number,
    default: 0
  }
})

//删除课时对话框
const delLesson = async (data: any) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      '删除课时后将无法恢复，确定继续么？',
      '警告',
      {
        // distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        icon: markRaw(Delete)
      }
    )

    if (confirmResult === 'confirm') {
      const res = await deleteLesson(data.id)
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '课时删除成功！'
        })
        loadData()
      } else {
        ElMessage({
          type: 'error',
          message: '课时删除失败，或者课程不存在！'
        })
      }
    }
  } catch (error) {
    ElMessage({
      type: 'warning',
      message: '删除已取消！'
    })
  }
}

//删除章节对话框
const delChapter = async (_node: any, _data: any) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      '删除章节后将无法恢复，确定继续么？',
      '警告',
      {
        // distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        icon: markRaw(Delete)
      }
    )

    if (confirmResult === 'confirm') {
      const res = await deleteLesson(_data.id)
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '课时删除成功！'
        })
        loadData()
      } else {
        ElMessage({
          type: 'error',
          message: '课时删除失败，或者课程不存在！'
        })
      }
    }
  } catch (error) {
    ElMessage({
      type: 'warning',
      message: '删除已取消！'
    })
  }
}

const handleNodeClick = (_data: any, _node: any) => {
  //两个参数,data这一列的数据，node包含相邻节点之类的大量信息
  // console.log(data, node)
}

//加载课程安排相关数据:在任何情况下向获取数据,调用此函数即可
const loadData = async () => {
  //获取课程基本信息
  const res1 = await getCourseInfoById(props.courseId)
  console.log(res1, '###')
  //浅拷贝，不破坏响应式
  Object.assign(courseInfo, res1.data)
  // console.log(courseInfo, 'courseInfo')
  //获取章节和课时信息,ch代表chapter,le代表lesson
  const res2 = await getChAndLeByCourseId(props.courseId)
  courseCAL.value = res2.data
  console.log(courseCAL)
}

//组件挂载完毕钩子
onMounted(async () => {
  loadData()
})
</script>

<style lang="scss" scoped>
.items-center :deep(.el-button) {
  color: #fff;
}
.svg-icon {
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 8px;
  right: 15px;
  cursor: pointer;
}
</style>

<style lang="scss">
.tree-chapter {
  caret-color: transparent;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__content {
    margin-top: 10px;
    padding: 9px 0px;
    border: 1px solid #ddd;
    font-size: 18px;
    .custom-tree-node span {
      font-weight: bolder;
      font-size: 15px;
      margin-left: 5px;
    }
  }
  .el-tree-node__children {
    padding-left: 36px;
    .custom-tree-node span {
      font-weight: 500;
      font-size: 13px;
    }
  }
}
</style>
